<!DOCTYPE html>
<html style="height:100%">
<head>
    <title>Grid Trade</title>
    <style>input {width:3em} td > input {width:3.5em} span {padding:0 0.25em}</style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div>
        <span>cash&nbsp;<input id="total" class="archiving" type="number" value="100" style="width:6em"/></span>
        <span>change&nbsp;<input id="change" class="archiving" type="number" value="5"/>%</span>
        <span>invest(change)&nbsp;<input id="amount" class="archiving" type="number" value="10"/>%</span>
    </div>
    <table id="tb">
        <thead>
            <tr>
                <td>subject</td>
                <td><input class="archiving" type="text" value="HS300"/></td>
                <td><input class="archiving" type="text" value="ZZ500"/></td>
                <td><input class="archiving" type="text" value="ZZ1000"/></td>
                <td><input class="archiving" type="text" value="HSI"/></td>
                <td><input class="archiving" type="text" value="DAX30"/></td>
                <td><input class="archiving" type="text" value="NASDAQ"/></td>
            </tr>
            <tr id="index_type">
                <td></td>
                <td><input class="archiving" type="number" value="15"/>%</td>
                <td><input class="archiving" type="number" value="15"/>%</td>
                <td><input class="archiving" type="number" value="15"/>%</td>
                <td><input class="archiving" type="number" value="15"/>%</td>
                <td><input class="archiving" type="number" value="20"/>%</td>
                <td><input class="archiving" type="number" value="20"/>%</td>
            </tr>
            <tr id="table-check" style="display:none">
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
                <td><input class="archiving" type="number" value="-1"/></td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>

function refreshUI() {
    let total = parseFloat(document.querySelector("#total").value);
    let change = 1 + parseFloat(document.querySelector("#change").value)*0.01;
    let amount = parseFloat(document.querySelector("#amount").value)*0.01;
    let index_types = document.querySelectorAll("#index_type > td > input");
    let index_percents = Array.from(index_types).map(node=>0.01*parseFloat(node.value));
    
    let html = "";
    for (let i = -33; i < 167; i++) {
        let price = (1.0 * Math.pow(change, i)).toFixed(3);
        html += `<tr><td>${price}</td>`;
        for (let index_percent of index_percents) {
            let val = Math.round(index_percent * total * amount / price / 100) * 100;
            html += `<td>${val}</td>`
        }
        html += "</tr>"
    }
    document.querySelector("#tb tbody").innerHTML = html;
    let table_checks = $("#table-check input");
    let tds = $("#tb tbody td");
    for (let col = 0; col < table_checks.length; col++) {
        let row = parseInt(table_checks[col].value);
        if (row > -1) {
            let td = tds[row * table_checks.length + col];
            td.style["background-color"] = "lightgrey";
            td.style["font-weight"] = "bold";
        }
    }
    tds.dblclick((e)=>{
        let row = $(e.target).parent().index();
        let col = $(e.target).index();
        let table_check = $(table_checks[col]);
        table_check.val(parseInt(table_check.val()) === row ? "-1" : `${row}`);
        table_check.keyup();
    });
}

function archivedata(isSave) {
    let data = {
        col:"z_gridtrade",
        filter:"{}"
    };
    if (isSave) {
        refreshUI();
        clearTimeout(archivedata.timeout);
        archivedata.timeout = setTimeout(()=>{
            let archivings = Array.from(document.querySelectorAll(".archiving"));
            data.doc = JSON.stringify({data: archivings.map((v)=>v.value)});
            $.ajax({method:"POST", url:"/api/findOneAndReplace", data});
        }, 1500);
    } else {
        $.ajax({method:"POST", url:"/api/findOne", data,complete:refreshUI,
            success:(res)=>{
                if (res && "data" in res && res.data instanceof Array) {
                    let archivings = Array.from(document.querySelectorAll(".archiving"));
                    for (let i = 0; i < Math.min(res.data.length, archivings.length); i++) {
                        archivings[i].value = res.data[i]
                    }
                }
            }
        });
    }
}
archivedata.timeout = -1;

for (let i of document.querySelectorAll(".archiving")){
    i.onchange=archivedata.bind(window, true);
    i.onkeyup=archivedata.bind(window, true);
}
archivedata(false)
    </script>
</body>
</html>